<template>
    <ul class="draw-tools">
        <li data-title="撤销上一步" @click="doPopOpeEvent('undo')" v-show="canUndo" :class="{ disabled: !canUndo }" class="_tooltip"><i class="iconfont">&#xe6c0;</i></li>
        <li data-title="清空" @click="doPopOpeEvent('clear')" v-show="canClear" :class="{ disabled: !canClear }" class="_tooltip"><i class="iconfont">&#xe659;</i></li>
    </ul>
</template>

<script>
import { toRefs } from 'vue'
export default {
    props: {
        canUndo: {
            type: Boolean,
            default: false
        },
        canClear: {
            type: Boolean,
            default: false
        }
    },
    setup (props, { emit }) {
        const { canUndo, canClear } = toRefs(props)
        const doPopOpeEvent = (prop) => {
            if ((prop == 'undo' && canUndo.value) || (prop == 'clear' && canClear.value)) {
                emit('ope', prop)
            }
        }
        return { doPopOpeEvent }
    }
}
</script>
